<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link href="/stylesheets/style.css" rel="stylesheet">
    <link href="/stylesheets/mobiscroll.min.css" rel="stylesheet">

    <script src="/javascripts/lib/jquery.cookie.min.js"></script>
    <script src="/javascripts/lib/mobiscroll.min.js"></script>
    <script src="/javascripts/common.js"></script>
    <script src="/javascripts/pieceController.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=61su9bm0PHw4gkMIZt8cZWpG"></script>

    <title>尚悦丨拼车</title>
</head>
<style type="text/css">

    p {
        color: #FFFAFA;
        text-align: center;
        font-size: 14px;
        border: 8px solid #FF7F00;
    }

    .header {
        background-color: #FF7F00;
    }
</style>
<body>
<div class="header">
    <p><b>拼&nbsp;&nbsp;&nbsp;车</b></p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-10">
            <form class="form-horizontal" style="margin-top: 60px;">
                <div class="form-group">
                    <label for="start_pos" class="col-xs-4 col-sm-4 control-label info-label">出发地</label>
                    <div class="col-xs-8">
                        <input style="width:160px;" type="text" class="form-control geo-location"
                               id="start_pos"  onchange="sureFee()" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="end_pos" class="col-xs-4 col-sm-4 control-label info-label">目的地</label>
                    <div class="col-xs-8">
                        <input style="width:160px;" type="text" class="form-control geo-location" id="end_pos"  onchange="sureFee()"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label for="entercar_time" class="col-xs-4 col-sm-4 control-label info-label">上车时间</label>
                    <div class="col-xs-8">
                        <input id="entercar_time" style="width:160px;" type="text"  onchange="sureFee()"
                               class="form-control form-datetime"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label for="entercar_people" class="col-xs-4 col-sm-4 control-label info-label">上车人数</label>
                    <div class="col-xs-8">
                        <input id="entercar_people" style="width:160px;" type="number" value="1" class="form-control" onchange="sureFee()"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 col-sm-4 control-label info-label">拼车时间</label>
                    <div class="col-sm-8 col-xs-8">
                        <select id="daysSelect" style="width:160px;height: 30px;" class="form-control" onchange="sureFee()">
                            <option value="7">1周</option>
                            <option value="30" selected>1个月</option>
                            <option value="90">3个月</option>
                            <option value="180">半年</option>

                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10 col-xs-offset-3 col-xs-9">
                    <button id="pieceBusiness" type="button" data="piece" class="btn btn-warning btn-xs float">&nbsp;&nbsp;确定&nbsp;&nbsp;
                    </button>
                    </div>
                </div>
                <div class="form-group" style="position: fixed;top:87%;left:41%">预计费用:<span style="color: red" id="total_fee">0</span>元</div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-10">

        </div>
    </div>
</div>
<span style="display: none" id="server">{{ server_url }}</span>
<div class="bottom-menu">
    <a href="/">首页&nbsp;</a><span>|</span>
    <a href="/piece">拼车&nbsp;</a><span>|</span>
    <a href="/rent">包车&nbsp;</a><span>|</span>
    <a href="/download/driver">与尚悦网合作&nbsp;</a><span>|</span>
    <a href="/user/center">个人中心&nbsp;</a>
</div>
<div id="bdMapContainer" class="map-container">
    <div id="bdMap"></div>
</div>
<div id="bdMapInput" class="input-container">
    <button type="button" class="btn btn-primary btn-xs geo-sure">确定</button>
    <button type="button" class="btn btn-warning btn-xs geo-cancel">取消</button>
    <input type="text" id="geoInput" placeholder="请输入地址或在地图上选择位置" class="form-control geo-input"/>
    <div id="completePanel" class="complete-panel"></div>
</div>
<div class="timer-container" style="" id="timer-container">
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-ms-offet-1">
            <div id="circle" class="circle lazy ">
                <div id="circle-cancle" class="circle lazy ">
                    <span id="cancle-timer"><b>Cancle</b></span>
                </div> <!--内圆-->
            </div>  
            <span id="timer">
            0
            </span>
            <span id="costs">
            <span>
        </div>
    </div>
</div>

<script src="http://webapi.openspeech.cn/socket.io/socket.io.js"></script>
</body>
</html>